<template>
	<el-tab-pane label="换房申请" name="changeRoomApply">
		<div>
			<el-row class="header">
				<el-col :span="10" :offset="18">
					<el-row :gutter="20">
						<el-col :span="8">
							<el-form-item label="学号：">
								<el-input v-model.number="stuid" />
							</el-form-item>
						</el-col>
						<el-col :span="3">
							<el-button class="btn" @click="submitSearch">
								<el-icon><Search /></el-icon>
								查询
							</el-button>
						</el-col>
						<el-col :span="3">
							<el-button class="btn" @click="resetSearch">重置</el-button>
						</el-col>
					</el-row>
				</el-col>
			</el-row>

			<div class="table">
				<el-table
					:data="changeRoomInfo"
					:header-cell-style="{ backgroundColor: '#00B4D422', color: '#000' }"
					:row-style="tableRowClassName">
					<el-table-column prop="stuName" label="姓名" />
					<el-table-column prop="stuId" label="学号" />
					<el-table-column prop="professional" label="专业" />
					<el-table-column prop="oldRoom" label="原寝室" />
					<el-table-column prop="newRoom" label="新寝室" />
					<el-table-column prop="reason" label="申请理由" />
					<el-table-column prop="phone" label="电话" />
					<el-table-column label="操作">
						<template #default="{ row }">
							<el-button link type="danger" @click="handleClickRefuse(row)">拒绝</el-button>
							<el-button link type="primary" @click="handleClickAgree(row)">同意</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>

			<!-- 同意对话框 -->
			<el-dialog v-model="showDialog" width="300">
				<template #header>
					<h2 class="title">{{ dialogText }}</h2>
				</template>
				<template #footer>
					<el-button class="btn" @click="handleRefOrAgree(dialogText)">确认</el-button>
					<el-button class="btn" @click="showDialog = false">取消</el-button>
				</template>
			</el-dialog>

			<!-- 分页 -->
			<el-row class="pagination">
				<el-pagination
					v-model:current-page="currentPage"
					v-model:page-size="pageSize"
					:page-sizes="pageSizes"
					small="small"
					:background="true"
					layout="total, sizes, prev, pager, next"
					:total="total"
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange" />
			</el-row>
		</div>
	</el-tab-pane>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import {
	queryExchangeInfoNo,
	queryExchangeInfoStu,
	agreeExchangeInfo,
	downExchangeInfo,
} from '@/utils/axios/domiRequests'
import { getExhangeInfoNo } from '@/utils/axios/getTotal'
import { debounce } from '@/utils/tools'
import useRegStore from '@/stores/useReg'
import { Search } from '@element-plus/icons'

const { handleCheckId } = useRegStore()

const currentPage = ref(1)
const pageSize = ref(10)
const pageSizes = reactive([10, 20, 30])
// 搜索条件
const stuid = ref()

// 同意/拒绝对象
const target = ref()

// 显示对话框
const showDialog = ref(false)
// const showAgreeDialog=ref(false)

// 对话框内容
const dialogText = ref('')
// 换房信息
const changeRoomInfo = ref([])
// 某楼栋所有换房申请总数
const total = ref(0)



// 重置
const resetSearch = () => {
	init().then(()=>stuid.value="")
}

const handleClickRefuse = (val) => {
	dialogText.value = '拒绝换房申请'
	target.value = val
	showDialog.value = true
}

const handleClickAgree = (val) => {
	dialogText.value = '同意换房申请'
	target.value = val
	showDialog.value = true
}


// 处理同意或拒绝操作
const handleRefOrAgree = async (val) => {
	val == '同意换房申请'
		? await agreeExchangeInfo({ changeId: target.value.changeId })
		: downExchangeInfo({ changeId: target.value.changeId })
	init().then(() => {
		showDialog.value = false
	})
}

// 处理搜索请求
const submitSearch = debounce(async () => {
	// 判断搜索条件是否合法
	if (!handleCheckId(stuid.value)) return
	let { data } = await queryExchangeInfoStu({ stuId: stuid.value })
	changeRoomInfo.value = data
})



const handleSizeChange = async (val) => {
	let { data } = await queryExchangeInfoNo({ currentPage: currentPage.value, pageSize: val, status: '未审核' })
	changeRoomInfo.value = data
}
const handleCurrentChange = async (val) => {
	let { data } = await queryExchangeInfoNo({ currentPage: val, pageSize: pageSize.value, status: '未审核' })
	changeRoomInfo.value = data
}

// 添加表格样式
const tableRowClassName = ({ row, rowIndex }) => {
	if (rowIndex % 2 === 1) {
		return { backgroundColor: '#00B4D411' }
	}
	return ''
}

async function init() {
	let { data } = await queryExchangeInfoNo({
		currentPage: currentPage.value,
		pageSize: pageSize.value,
		status: '未审核',
	})
	let res = await getExhangeInfoNo()
	changeRoomInfo.value = data
	total.value = res.data
}

onMounted(async () => {
	await init()
})
</script>

<style scoped lang="scss">
.el-input {
	width: 100px;
}

.btn {
	background: rgb(0, 202, 237);
	color: #ffff;
}

.header {
	margin-bottom: 20px;
}

.pagination {
	position: absolute;
}
.title {
	font-size: 20px;
	color: rgba(0, 201, 237, 0.719);
}
</style>
